<template>
  <!-- 历史记录 -->
  <div class="hist">
    <div class="history">
      <text>历史记录</text>
      <van-icon name="delete-o" size="18px" @click="remove"/>
    </div>
    <!-- 展示框 -->
    <div class="boxs">
      <div class="boxs-item" v-for="(item,index) in historyList" :key="index">{{ item }}</div>
    </div>
  </div>
  <!-- 热门搜索 -->
  <div class="search-hot">
    <p>热门搜索</p>
    <div class="footer">
      <div class="footer-item" @click="changeActive(item)"  :class="item.highlight === 1 ? 'active': ''" v-for="(item,index) in hotKeywordVOList" :key="index" >{{ item.keyword }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getSearch } from '@/api/search';
import {onMounted,watch} from 'vue'
import { useRouter,useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
// 接收父组件传递的数据
const props = defineProps(['hotKeywordVOList'])
const emits = defineEmits<{
  (e:'update:modelValue',keyword:string):void
}>()

// 点击修改当前
const changeActive = (item)=>{
  item.highlight = 1
  emits('update:modelValue',item.keyword)
  props.hotKeywordVOList.filter(aa =>{
    if(aa.keyword === item.keyword){
      return
    }
    aa.highlight = 0
  })
}
// 删除历史记录
const remove = ()=>{
  localStorage.removeItem('search')
  router.go(0)
}
// 获取数据
const getSearchValue = async ()=>{
  try {
    if(route.query.key as string){
      // router.go(0)
      let result = await getSearch()
      console.log(result)
    }
  } catch (error) {
    console.log(1111);
  }

}
onMounted(()=>{
  getSearchValue()
})
// 取出本地存储的历史记录
const historyList = JSON.parse(localStorage.getItem('search'))
</script>

<style lang="less" scoped>
 .hist {
  background: #fff;
  padding-bottom: 10px;
}
 .history {
  padding: 10px 15px;
  font-size: 14px;
  display: flex;
  align-items: center;
}
 .history text {
  flex: 1;
  color: #999;
}
 .boxs {
  margin: 10px 10px;
  display: flex;
  flex-wrap: wrap;
}
.boxs .boxs-item {
  margin: 0 8px 15px;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
// 热门搜索
.search-hot {
  background: #fff;
}
.search-hot p {
  display: block;
  font-size: 14px;
  color: #999;
  margin: 10px 15px;
  padding-top: 10px;
}
.search-hot .footer {
  margin: 10px 10px;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 10px;
}
.search-hot .footer .footer-item {
  margin: 0 8px 15px;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.search-hot .footer .footer-item.active{
  border: 1px solid #f00;
}
// .active {
//   b
// }
</style>
